﻿@model NewsItemModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(!string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Title);
    pagebuilder.AddMetaDescriptionParts(Model.MetaDescription);
    pagebuilder.AddMetaKeywordParts(Model.MetaKeywords);
}
<div class="page news-item-page">
    <div class="card mt-3">
        <div class="card-header">
            @if (!string.IsNullOrEmpty(Model.PictureModel.ImageUrl))
            {
                <b-img-lazy class="img-fluid mb-3" src="@Model.PictureModel.ImageUrl" alt="@Model.PictureModel.AlternateText"></b-img-lazy>
            }
            <h1 class="h5 mb-0">
                @Model.Title
            </h1>
            <span class="small text-muted">
                @Model.CreatedOn.ToString("D")
            </span>
        </div>
        @await Component.InvokeAsync("Widget", new { widgetZone = "newsitem_page_before_body", additionalData = Model.Id })
        <div class="card-body">
            @Html.Raw(Model.Full)
        </div>
    </div>
    @await Component.InvokeAsync("Widget", new { widgetZone = "newsitem_page_before_comments", additionalData = Model.Id })
    @if (Model.AllowComments)
    {
        <fieldset class="new-comment py-3 px-0" id="comments">
            <h5>
                <strong>@Loc["News.Comments.LeaveYourComment"]</strong>
            </h5>
            <validation-observer v-slot="{ handleSubmit }">
                <form id="addNewsComment" asp-action="NewsCommentAdd" asp-controller="News" method="post" v-on:submit.prevent="handleSubmit(news.submitNewsComment)">
                    <input type="hidden" name="Id" value="@Model.Id"/>
                    <fieldset class="form-group">
                        <validation-provider tag="div" rules="required" name="CommentTitle" v-slot="{ errors, classes }">
                            <label for="CommentTitle" class="col-form-label">@Loc["News.Comments.CommentTitle"]:</label>
                            <span class="required">*</span>
                            <input name="CommentTitle" v-bind:class="[classes , 'form-control enter-comment-title']"
                                   data-val-required="@Loc["News.Comments.CommentTitle.Required"]"
                                   v-model="news.CommentTitle"/>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                        </validation-provider>
                    </fieldset>
                    <fieldset class="form-group">
                        <validation-provider tag="div" rules="required" name="CommentText" v-slot="{ errors, classes }">
                            <label for="CommentText" class="col-form-label">@Loc["News.Comments.CommentText"]:</label>
                            <span class="required">*</span>
                            <textarea name="CommentText" v-model="news.CommentText" 
                                    data-val-required="@Loc["News.Comments.CommentText.Required"]"
                                    v-bind:class="[classes , 'form-control']" autofocus="autofocus" rows="4"></textarea>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                        </validation-provider>
                    </fieldset>
                    @if (Model.AddNewComment.DisplayCaptcha)
                    {
                        <div class="captcha-box">
                            <captcha/>
                        </div>
                    }
                    <div class="buttons text-xs-center text-md-left generalMarginSupporter">
                        <input type="submit" name="add-comment" class="btn btn-info news-item-add-comment-button" value="@Loc["News.Comments.SubmitButton"]"/>
                    </div>
                </form>
            </validation-observer>
        </fieldset>
        <script asp-location="Footer" asp-order="300">
                var news = new Vue({
                    data: () => {
                        return {
                            Model: null,
                            CommentTitle: '',
                            CommentText: ''
                        }                        
                    },
                    created() {
                        this.Model = @Json.Serialize(Model.Comments);
                    },
                    methods: {
                        submitNewsComment() {
                            var form = document.getElementById("addNewsComment");
                            var url = form.getAttribute("action");
                            var bodyFormData = new FormData(form);
                            axios({
                                url: url,
                                data: bodyFormData,
                                method: 'post',
                                headers: {
                                'Accept': 'application/json'                                    
                            }
                            }).then(function (response) {
                                if (response.data.success == true){
                                    news.CommentTitle = ' ';
                                    news.CommentText = ' ';
                                    vm.displayBarNotification(response.data.message, '', 'success', 3000);
                                    if (response.data.model){
                                        news.addComment(response.data.model)
                                    }
                                } else {
                                    vm.displayBarNotification(response.data.message, '', 'error', 3500);
                                }
                            })
                        },
                        addComment(model) {
                              // Add object item to array
                              this.Model.push(model);
                        }
                    }
                });
        </script>
        <template v-if="news.Model.length > 0">
            <div class="comment-list">
                <h4 class="generalTitle generalMarginSupporter">
                    <strong>@Loc["News.Comments"]</strong>
                </h4>
                <div class="comments">
                    <template v-for="comment in news.Model">
                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="d-inline-flex w-100">
                                    <h6 class="mb-0">{{comment.CustomerName}}</h6>
                                    <b-icon icon="calendar2-check" variant="info" class="mx-2"></b-icon>
                                    <small class="date text-muted">
                                        <span>@Loc["News.Comments.CreatedOn"]:</span>
                                        <span>{{new Date( comment.CreatedOn).toDateString()}}</span>
                                    </small>
                                </div>
                            </div>
                            <div class="card-body">
                                <h5>{{comment.CommentTitle}}</h5>
                                {{comment.CommentText}}
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </template>
    }
    @await Component.InvokeAsync("Widget", new { widgetZone = "newsitem_page_after_comments", additionalData = Model.Id })
</div>